.wasm ফাইল তৈরি এবং ব্রাউজারে লোড করা
WebAssembly (WASM) ফাইল তৈরি করা এবং ব্রাউজারে লোড করার প্রক্রিয়া নিচে ধাপে ধাপে দেওয়া হলো। আমরা প্রথমে একটি C প্রোগ্রাম লিখে সেটি WebAssembly (.wasm) ফরম্যাটে কম্পাইল করব এবং তারপর সেই WASM ফাইলটি ব্রাউজারে লোড করব।
1. C কোড লেখা
প্রথমে, একটি সিম্পল C প্রোগ্রাম লিখুন যা আপনাকে WebAssembly ফরম্যাটে কম্পাইল করতে সাহায্য করবে। উদাহরণস্বরূপ, আমরা একটি "Hello, WebAssembly!" প্রোগ্রাম লিখব।
ফাইল নাম: hello_world.c
#include <stdio.h>
int main() {
printf("Hello, WebAssembly!\n");
return 0;
}এটি একটি সাধারণ C প্রোগ্রাম যা স্ক্রীনে "Hello, WebAssembly!" প্রিন্ট করবে।
2. Emscripten ইনস্টলেশন এবং সেটআপ
এখন আপনাকে Emscripten ইনস্টল করতে হবে। এটি C এবং C++ কোডকে WebAssembly (.wasm) ফরম্যাটে কম্পাইল করতে সাহায্য করবে।
Emscripten ইনস্টলেশন:
Emscripten SDK ডাউনলোড এবং ইনস্টল করুন:
git clone https://github.com/emscripten-core/emsdk.git cd emsdk ./emsdk install latest ./emsdk activate latest source ./emsdk_env.shEmscripten ইনস্টলেশন নিশ্চিত করুন:
emcc -vএটি আপনার ইনস্টলেশন সঠিকভাবে হয়েছে কিনা নিশ্চিত করবে।
3. C কোডকে WebAssembly (.wasm) ফরম্যাটে কম্পাইল করা
এখন C কোডটি WebAssembly (.wasm) ফরম্যাটে কম্পাইল করতে emcc ব্যবহার করুন। এখানে .html ফাইলটি তৈরি করা হবে যাতে আপনি এটি ব্রাউজারে রান করতে পারেন এবং .wasm ফাইলটি আলাদা আউটপুট হিসেবে তৈরি হবে।
emcc hello_world.c -o hello_world.htmlব্যাখ্যা:
hello_world.c: এটি আপনার C ফাইল।-o hello_world.html: আউটপুট হিসেবে HTML ফাইল তৈরি হবে, যা ব্রাউজারে WebAssembly কোড রান করতে ব্যবহৃত হবে।.wasmফাইলটিhello_world.wasmনামে তৈরি হবে এবং এটি WebAssembly বাইনারি ফাইল।
এখন hello_world.html এবং hello_world.wasm ফাইল তৈরি হবে।
4. HTML ফাইল তৈরি এবং WebAssembly লোড করা
hello_world.html ফাইলটি তৈরি হয়ে গেলে, আপনি এটি WebAssembly ফাইলটি ব্রাউজারে লোড করার জন্য ব্যবহার করবেন।
hello_world.html ফাইলের একটি সাধারণ কনফিগারেশন হতে পারে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAssembly Example</title>
</head>
<body>
<h1>WebAssembly Example</h1>
<script>
// WASM ফাইল লোড করা
fetch('hello_world.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(wasmModule => {
console.log('WebAssembly Loaded', wasmModule);
// WebAssembly মডিউলটি ব্যবহার করা
const instance = wasmModule.instance;
instance.exports._main(); // _main ফাংশনকে কল করা
})
.catch(console.error);
</script>
</body>
</html>এখানে fetch() ফাংশন ব্যবহার করে hello_world.wasm ফাইলটি ব্রাউজারে লোড করা হচ্ছে। WebAssembly.instantiate() মাধ্যমে WASM ফাইলটি ব্রাউজারে এক্সিকিউট করা হবে এবং main() ফাংশন (যা C প্রোগ্রামে তৈরি) রান করবে।
5. লোকাল HTTP সার্ভারে ফাইল রান করা
ওয়েব অ্যাপ্লিকেশনটি ব্রাউজারে দেখতে হলে, আপনাকে একটি HTTP সার্ভার চালাতে হবে, কারণ বেশিরভাগ ব্রাউজার লোকাল ফাইল সিস্টেম থেকে ওয়েব অ্যাপ্লিকেশন ফাইল রান করতে সীমাবদ্ধ।
Python HTTP সার্ভার:
python3 -m http.serverএটি একটি লোকাল HTTP সার্ভার চালু করবে যা http://localhost:8000/ ঠিকানায় আপনার ফাইলগুলো অ্যাক্সেস করতে দেবে।
6. ব্রাউজারে লোড করা
এখন আপনার ব্রাউজার খুলে http://localhost:8000/hello_world.html লিঙ্কে যান। আপনি স্ক্রীনে "Hello, WebAssembly!" বার্তা দেখতে পাবেন। আপনি DevTools এ গিয়ে JavaScript কনসোলেও WebAssembly এর আউটপুট দেখতে পাবেন।
সারসংক্ষেপ
- আপনি প্রথমে একটি C প্রোগ্রাম লিখেছেন যা "Hello, WebAssembly!" প্রিন্ট করে।
Emscriptenব্যবহার করে সেই C প্রোগ্রামটি WebAssembly (.wasm) ফরম্যাটে কম্পাইল করেছেন।- HTML ফাইল তৈরি করেছেন যা
.wasmফাইলটি ব্রাউজারে লোড করে WebAssembly কোড রান করবে। - শেষে, Python HTTP সার্ভার ব্যবহার করে লোকাল পরিবেশে WebAssembly প্রোগ্রামটি ব্রাউজারে চালিয়েছেন।
এটি ছিল আপনার প্রথম WebAssembly প্রোগ্রাম তৈরি এবং ব্রাউজারে লোড করার প্রক্রিয়া।
Read more
